<script lang="ts" setup>
	import { ref, onMounted, computed } from 'vue'
	import { onBackPress, onShow } from "@dcloudio/uni-app"
	import { getReports } from '@/api/psychology/report.js'
	import { getTasks, getOwnerTasksPage, getScalesPage, creatOwnerTasks } from '@/api/psychology/task.js'
	import { userInfo } from '@/store/Pinia/userInfo.js'

	let tasks = ref<any[]>([]);

	const unfinished = ref<any[]>([]);
	const finished = ref<any[]>([]);
	onMounted(() => {
		navchange(0)
	})



	onShow(() => {

	})
	uni.$on('upTasks', function () {
		upDataTasks()
	});

	const upDataTasks = () => {
		tasks.value = []
		unfinished.value = []
		finished.value = []
		getTasksList()
	}

	// 当前选中的标签索引
	const currentTabIndex = ref(0)
	const showPopup = ref(false)

	const navchange = (e) => {
		currentTabIndex.value = e
		current.value = 1
		if (currentTabIndex.value == 0) {
			pageSize.value = 6
			tableHeadList.value = tableHeadListScale.value
			getTasksList()
		} else if (currentTabIndex.value == 1) {
			pageSize.value = 6
			tableHeadList.value = tableHeadListReport.value
			getReportsList()
		}
	}



	const tabs = [{ id: 0, name: '待完成' }, { id: 0, name: '已完成' }]
	const cates = ["待完成", "已完成"]

	const lead = (pagePath : any) => {
		uni.navigateTo({
			url: pagePath
		})
	}
	let tabIds = ref<any[]>([]);
	let taskId = ref<any>();
	const tabName = ref<String>();

	// 开始答题,获得量表题目
	function startTest(tabIdsParam : any, taskIdParam : String, tabNameParam : String) : void {
		showPopup.value = true;
		tabIds.value = tabIdsParam;
		taskId.value = taskIdParam;
		tabName.value = tabNameParam;
		// 这里可以执行你想要的逻辑，如跳转页面等
	}

	function start() : void {
		if (scalesId.value != 0) {
			let item = {
				"tabId": scalesId.value
			}
			creatOwnerTasks(item).then((res) => {
				if (res.data.success) {
					const tabIds = res.data.data.tabIds
					getOwnerTasksPage({ id: res.data.data.id }).then((it) => {
						if (it.data.success) {
							const tabIds = it.data.data.records[0].tabIds[0]
							const taskId = it.data.data.records[0].taskId
							const tabName = it.data.data.records[0].tabName
							showPopup.value = false
							setTimeout(() => {
								uni.navigateTo({
									url: `/pages/evaluation/tip/tip?tabIds=${tabIds}&taskId=${taskId}&tabName=${tabName}`
								})
							}, 500)

						}
					})

				}
			})
		}
	}

	const back = () => {
		uni.navigateTo({
			url:'/pages/evaluation/index/index'
		})
	}

	const userInfoModel = userInfo()
	const scale = ref<any[]>([]);



	//分页方法
	const current = ref(0)
	const totalData = ref(0)
	const pageSize = ref(0)
	const pageNum = computed(() => {
		return Math.ceil(totalData.value / pageSize.value)
	})
	const pageList = computed(() => {
		let list = []
		for (let i = 1; i <= pageNum.value; i++) {
			list.push(i);
		}
		return [...list]
	})

	const jumpTo = (e) => {
		console.log(e)
		current.value = e
		getList()
	}

	const changePage = (e) => {
		current.value = e.current
		getList()
	}
	const getList = () => {
		if (currentTabIndex.value == 0) {
			getTasksList()
		} else if (currentTabIndex.value == 1) {
			getReportsList()
		}
	}

	const getTasksList = () => {//获取量表分页列表
		let item = {
			size: pageSize.value,
			current: current.value,
			stuTaskState: '0',
			"category": "reservation",
			disabled:false
		}
		getScalesPage(item).then(res => {
			if (res.data.code == 200) {
				unfinished.value
				tasks.value = res.data.data.records;
				totalData.value = res.data.data.total
				unfinished.value = tasks.value
			}
		}).catch(error => {
			console.log(error)
		})
	}

	const getReportsList = () => {//获取报告分页列表
		let item = {
			size: pageSize.value,
			current: current.value,
			stuId: userInfoModel.data.id ?? ''
		}
		getReports(item).then(res => {
			if (res.data.code == 200) {
				scale.value = res.data.data.records
				tasks.value = scale.value;
				totalData.value = res.data.data.total

			}
		}).catch(error => {
			console.log(error)
		})
	}

	const searchScale = (e) => {
		let item = {
			size: pageSize.value,
			current: current.value,
			stuId: userInfoModel.data.id ?? '',
			name: e.detail.value,
			stuTaskState: '0',
			type: "reservation"
		}
		getScalesPage(item).then(res => {
			if (res.data.code == 200) {
				tasks.value = res.data.data.records;
				totalData.value = res.data.data.total
				unfinished.value = tasks.value
			}
		})
	}
	const search = (e) => {
		let item = {
			size: pageSize.value,
			current: current.value,
			stuId: userInfoModel.data.id ?? '',
			title: e.detail.value,
			stuTaskState: '0',
			"type": "reservation"
		}
		getReports(item).then(res => {
			if (res.data.code == 200) {
				scale.value = res.data.data.records
				tasks.value = scale.value;
				totalData.value = res.data.data.total

			}
		}).catch(error => {
			console.log(error)
		})
	}

	const taskShow = ref(false)


	const tableHeadListScale = ref([{ name: '量表名', flex: 3 }, { name: '量表简介', flex: 5 }, { name: '创建时间', flex: 2 }])
	const tableHeadListReport = ref([{ name: '量表名', flex: 5 }, { name: '任务名', flex: 5 }, { name: '创建时间', flex: 2 }])

	const tableHeadList = ref([{ name: '量表名', flex: 5 }, { name: '任务名', flex: 5 }, { name: '创建时间', flex: 2 }])

	const rowData = computed(() => {
		return function (item) {
			if (currentTabIndex.value == 0) { return [item.name, item.introduction, item.createTime] }
			else {
				return [item.tabName, item.taskName, item.finishedTime]
			}

		}
	})

	const backToMain = () => {
		uni.navigateBack()

	}

	const selectNavigateTo = (item) => {
		console.log('itemtiem', item)
		if (currentTabIndex.value == 0) {
			addTask(item)
			// uni.navigateTo({
			// 	url: `/pages/evaluation/tip/tip?tabIds=${item.tabIds[0]}&taskId=${item.taskId}&tabName=${item.tabName}`
			// })
		} else if (currentTabIndex.value == 1) {
			uni.navigateTo({
				url: `/pages/evaluation/report/report?id=${item.id}`
			})
		}
	}

	const scalesId = ref(0)
	const addTask = (e) => {

		scalesId.value = e.id;
		showPopup.value = true
	}
	const timer = ref(null)
	const handleEnd = () => {
		timer.value.resetTime()
	}
</script>

<template>
<articleTable ref="timer"></articleTable>
	<img :src="'@/../static/img/appoint/appoint-bg.svg'"
		style="opacity: 0.2;width: 45%;position: absolute;top: 50%;right: 0;" />
	<Navigator :fixed="true" background-color="transparent" status-bar left-icon="back" left-text="返回" title="量表测评"
		@clickLeft="back" customLeft class="absolute">
	</Navigator>
	<u-modal :show="showPopup" showCancelButton width="550rpx" @confirm="start" @cancel="showPopup = false"
		confirmColor='#ec9c01'>
		<view>
			<text style="color:4c4c4c;">即将进行量表测评，是否继续？</text>
		</view>
	</u-modal>
	<view @touchend="handleEnd" class="wh100p body flex-column " style="justify-content: center; align-items: center;">
		<view class="w100p h100p flex-column mt10" style="padding:1% 4%;box-sizing: border-box;">
			<view class="flex-between w100p column-center" style="height: 10%;">
				<view style="width:600px;height: 100%;">
					<view class=" gui-dark-bg-level-3  gui-margin-top custom" style="padding:5% 0">
						<gui-switch-navigation :items="[{id:0,name:'待完成'},{id:1,name:'已完成'}]" textAlign="center"
							:isCenter="false" activeDirection="center" :size="0" :margin="20" padding="10rpx"
							activeLineHeight="6rpx" :scorllAnimation="true" activeFontSize="34px" fontSize="32px"
							lineHeight="48px" :titleClass="['color56A5FF']" :width="1800"
							@change="navchange"></gui-switch-navigation>
					</view>
				</view>
			</view>
			<view class="flex-center wh100p mt20" style="padding:0 1%;box-sizing:border-box;height: 90%;">
				<view class='record-box w100p relative' style="height:95%">
					<view class="w100p flex-center absolute">
						<view class="lines" style="width: 70%;height:4px"></view>
					</view>
					<view class="wh100p flex-column " style="padding:1% 3%;box-sizing: border-box;">
						<view class="w100p   flex-between" style="height: 7%;padding:0.5% 1%;box-sizing: border-box; ">
							<view class="relative flex-end " style="width: 300px;height: 60px;">
								<input v-show="currentTabIndex == 0" class="input-box wh100p"
									style="border: 1px solid #DCDCDC;color:white" placeholder="请输入量表名"
									placeholder-style="color:white" @confirm="searchScale" @blur="searchScale" />

								<!-- <input v-show="currentTabIndex == 1" class="input-box wh100p" style="border: 1px solid #DCDCDC;color:white"
									placeholder="请输入报告名" placeholder-style="color:white" @confirm="searchReport"
									@blur="searchReport" /> -->
								<view class="h100p flex column-center" v-show="currentTabIndex == 0"
									style="position: absolute;top: 0;padding-right:20px;box-sizing: border-box;"><img
										:src="'@/../static/img/search.svg'" />
								</view>

							</view>
							<!-- <button type="default" class="gui-button  gui-noborder h100p flex-center column-center"
								@click="addTask" style="border-radius: 12px;width: 5%;
							background: linear-gradient(90deg, #49BEFF 0%, #3186FC 100%);">
								<text class="gui-color-white gui-button-text" style="font-size: 20px;">新增</text>
							</button> -->
						</view>
						<view class="w100p mt10" style="flex: 1;">
							<view class=" gui-dark-bg-level-3 gui-padding  wh100p" style="padding-bottom: 0;">
								<view class="gui-flex gui-rows gui-nowrap   table-head-bg column-center"
									style="height:11%">
									<text class="gui-td  table-head-text " v-for="(item,index) in tableHeadList"
										:key="index" :style="'margin: 0 20px;flex: '+item.flex">{{item.name}}</text>
									<text class="gui-td  table-head-text "
										style="flex: 1;text-align: right;margin: 0 20px;">操作</text>
								</view>
								<view class="gui-flex gui-rows gui-nowrap table-content-item"
									v-for="(item, index) in tasks" :key="index" style="overflow: hidden;">
									<view class="gui-td  table-content-text " v-for="(it,ind) in tableHeadList"
										:key="index" :style="'margin: 0 20px;flex: '+it.flex">
										<text>{{rowData(item)[ind]??'--'}}</text>
									</view>
									<view class="gui-td  table-head-text h100p flex-end column-center"
										style="flex: 1;text-align: right;padding: 0 20px;background: rgba(0, 0, 0, 0.10);">
										<text style="color: #348BFD;font-size: 20px;"
											@click="selectNavigateTo(item)">{{currentTabIndex == 0?'开始做题':'查看报告'}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="custom" style="height: 5%;color: white;">
							<uni-pagination :total="totalData" prev-text="上一页" next-text="下一页" :pageSize="pageSize"
								@change="changePage" :current="current" />
						</view>
					</view>

				</view>

			</view>


			<view class="flex w100p"></view>
		</view>

	</view>

</template>

<style>
	.body {
		background: linear-gradient(90deg, #0078BB 0%, #003E94 100%);

	}

	/deep/.custom .zzx-calendar .calendar-days {
		height: 80%;
	}

	/deep/.custom .zzx-calendar .calendar-days .calendar-day {
		height: 50px;

	}

	/deep/.custom .gui-primary-text {
		color: white;
	}

	.colorfff {
		color: white;
	}

	.record-box {

		border-radius: 12px;
		background: rgba(0, 0, 0, 0.20);

	}

	.lines {
		background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.80) 50%, rgba(255, 255, 255, 0.00) 100%);
	}

	.table-head-bg {
		border-bottom: 1px solid var(---Light-Gary, #E8E8E9);
		background: #1E65C2;
	}

	.table-head-text {
		color: #FFF;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: FZLanTingHei-DB-GBK;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 44px;
		/* 183.333% */
	}

	.table-content-text {
		font-size: 22px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 30px;
		color: #FFF;
		text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		font-family: FZLanTingHei-DB-GBK;
		font-style: normal;
		font-weight: 400;
	}

	.table-content-item {
		height: 12%;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
		align-self: stretch;
		border-bottom: 1px solid rgba(232, 232, 233, 0.30);
	}

	.table-content-item-text {
		color: #FFF;
		font-family: FZLanTingHei-R-GBK;
		font-size: 24px;
		font-style: normal;
		font-weight: 400;
		line-height: 44px;

		/* 91.667% */
	}

	.gui-td {
		/* width: 100rpx; */
		flex: 1;
		overflow: hidden;
		/* padding: 0 1%; */
		display: flexbox;
		box-sizing: border-box;
		white-space: nowrap;
	}

	/deep/.custom .uni-pagination__num-tag {
		margin: 0 8px;
		font-size: 18px;
		padding: 0 10px;
	}

	/deep/.custom .uni-pagination__total {
		font-size: 18px;
		color: white;
		margin-right: 20px;
	}

	/deep/.custom .uni-pagination__child-btn {
		font-size: 18px;

	}

	.input-box {
		padding: 5px 24px;
		box-sizing: border-box;
		border-radius: 12px;

		background: rgba(0, 0, 0, 0.10);
		/* Headline/Small */
		font-family: PingFang SC;
		font-size: 24px;
		font-style: normal;

		line-height: 32px;
		/* 133.333% */
	}
</style>